<template>
  <div>
    <h1>工作台</h1>
    
    <el-row :gutter="20" class="dashboard-stats">
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #409EFF;">
              <el-icon size="24" color="white"><User /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalCompanies }}</div>
              <div class="stat-label">合作公司</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #67C23A;">
              <el-icon size="24" color="white"><Document /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalTasks }}</div>
              <div class="stat-label">总任务数</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #E6A23C;">
              <el-icon size="24" color="white"><UserFilled /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">{{ stats.totalWorkers }}</div>
              <div class="stat-label">服务者</div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-icon" style="background: #F56C6C;">
              <el-icon size="24" color="white"><Money /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-number">¥{{ stats.totalAmount }}</div>
              <div class="stat-label">总金额</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待处理任务</span>
            </div>
          </template>
          <el-table :data="pendingTasks" style="width: 100%">
            <el-table-column prop="title" label="任务标题" />
            <el-table-column prop="companyName" label="发布公司" />
            <el-table-column prop="createTime" label="发布时间" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleTaskDetail(row)">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待结算订单</span>
            </div>
          </template>
          <el-table :data="pendingSettlements" style="width: 100%">
            <el-table-column prop="taskTitle" label="任务标题" />
            <el-table-column prop="workerName" label="服务者" />
            <el-table-column prop="amount" label="金额" />
            <el-table-column label="操作" width="100">
              <template #default="{ row }">
                <el-button type="primary" link @click="handleSettlement(row)">
                  结算
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getDashboardStats, getPendingTasks, getPendingSettlements } from '@/api/dashboard'

const stats = ref({
  totalCompanies: 0,
  totalTasks: 0,
  totalWorkers: 0,
  totalAmount: 0
})

const pendingTasks = ref([])
const pendingSettlements = ref([])

const loadData = async () => {
  try {
    const [statsRes, tasksRes, settlementsRes] = await Promise.all([
      getDashboardStats(),
      getPendingTasks(),
      getPendingSettlements()
    ])
    
    stats.value = statsRes.data
    pendingTasks.value = tasksRes.data
    pendingSettlements.value = settlementsRes.data
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

const handleTaskDetail = (task) => {
  // 跳转到任务详情
}

const handleSettlement = (settlement) => {
  // 跳转到结算页面
}

onMounted(() => {
  loadData()
})
</script>

<style scoped>
.dashboard-stats {
  margin-bottom: 20px;
}

.stat-card {
  height: 120px;
}

.stat-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card-header {
  font-weight: bold;
}
</style>